@MainColor: #429df8; //主色
@AssistOrange: #fe843b; //辅助色A -> 橙色
@AssistRed: #e82c2b; //辅助色B -> 红色
@AssistDarkGrey: #c8c8c8; //辅助色C -> 深灰色
@AssistLightGrey: #e0e0e0; //辅助色D -> 浅灰色
@AssistBgWhite: #ffffff; //辅助色E -> 背景白色
@TitleText: #323232; //标题文字
@ContentText: #808080; //内容文字
@ContentTextWhite: #ffffff; //内容文字白色
@AnnotativeText: #ccc9cd; //文字灰色
@AssistTextA: #429df8; //辅助性文字A
@AssistTextB: #ef2727; //辅助性文字B
@ZebraCrossing: #f4f4f4; //斑马线颜色

@images: "../../images"; //图片路径

//设置宽度、高度
.widthAndHeight(@width, @height) {
  width: @width;
  height: @height;
}

//设置宽度、高度、行高、文字对齐方式
.textGather(@width, @height, @textAlign: center) {
  width: @width;
  height: @height;
  line-height: @height;
  text-align: @textAlign;
}

//设置内容溢出滚动
.contentOverflowRoll(@direction: y){
  overflow-@{direction}: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

//设置背景图
.background(@url) {
  background: @url no-repeat center/100% 100%;
}

//设置定位，水平垂直居中
.position(@pos: relative) {
  position: @pos;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

//弹性布局
.flex {
  display: flex;
  align-items: center;
}

//设置字号大小 行间距
//导航栏标题或其它页面标题文字
.ActivityTitle {
  font-size: 36px;
  line-height: 54px;
}

//列表文字标题
.ListTitle {
  font-size: 28px;
  line-height: 48px;
}

//列表标题详情文字
.DetailsText {
  font-size: 30px;
  line-height: 45px;
}

//详细信息标题、卡片内容标题
.DetailsInfoTitle {
  font-size: 26px;
  line-height: 42px;
}

//提示信息、数据描述
.PromptInfo {
  font-size: 24px;
  line-height: 39px;
}

//详细信息提示、卡片内容提示
.DetailsPrompt {
  font-size: 22px;
  line-height: 36px;
}

//备注信息
.RemarksInfo {
  font-size: 20px;
  line-height: 33px;
}
//下拉菜单的按钮
.btn {
  display: flex;
  justify-content: center;
  button {
    width: 346px;
    height: 60px;
    color: #fff;
    border: none;
    margin-bottom: 20px;
    &:nth-child(1) {
      background: #64aefd;
      border-radius: 30px 0 0 30px;
    }
    &:nth-child(2) {
      background: @MainColor;
      border-radius: 0 30px 30px 0;
    }
  }
}
//超过一行显示省略
@overflowOmit: {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
};
